<script setup>
    import { ref } from 'vue'
    import PageWrapper from '@components/PageWrapper.vue'
    import { common, service } from '@utils'

    const props = defineProps({
        data: Object,
        statuss: Array
    })

    const pageRef = ref()
    const tableRef = ref()

    const getData = async ({ pageNum, pageSize }, cb) => {
        const res = props.data.bizOrderStages
        cb(res)
        setTimeout(() => {
            tableRef.value.scrollTo(0, 0)
        }, 0)
    }
</script>
<template>
    <page-wrapper @get-data="getData" ref="pageRef" :noPage="true">
        <template v-slot:default="props">
            <vxe-table
                class="mytable-scrollbar"
                ref="tableRef"
                :loading="props.loading"
                :data="props.tableData.records"
                :max-height="common.tableHeight(true, 0, 200)"
                highlight-hover-row
                round
                stripe
                border
            >
                <vxe-column type="seq" width="40"></vxe-column>
                <vxe-column field="orderId" title="订单ID" width="150" />
                <vxe-column field="rentDays" title="租用天数" width="75" />
                <vxe-column title="状态" width="80">
                    <template #default="{ row }">
                        <el-tag>
                            {{ common.getValueByKey('value', row.state, statuss, 'label') }}
                        </el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="stages" title="分期期数" width="75" />
                <vxe-column field="stagesNow" title="当前期数" width="75" />
                <!-- <vxe-column field="totalRent" title="总租金" width="80" /> -->
                <vxe-column field="price" title="当前租金" width="80" />
                <vxe-column field="overdueDays" title="逾期天数" width="75" />
                <vxe-column field="overduePrice" title="逾期金额" width="80" />
                <vxe-column field="repayDate" title="账单日" width="165" />
                <vxe-column field="payDate" title="还款时间" width="165" />
                <vxe-column field="tradeNo" title="交易单号" width="160" />
                <vxe-column field="transactionNum" title="商家订单号" width="250" />
                <vxe-column field="payPrice" title="实际支付金额" min-width="100" fixed="right" />
            </vxe-table>
        </template>
    </page-wrapper>
</template>
